<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>GEO散点</title>
    <link rel="stylesheet" href="../../css/main.css">
    <script src="../../mapData/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../mapData/js/echarts/echarts.js"></script>
</head>
<body>
<div id="map" style="height: 100%;width: 100%;float: left"></div>
</body>
<script type="text/javascript">
    var data = [
        {name: '娄烦县', value: randomValue()},
        {name: '古交市', value: randomValue()},
        {name: '阳曲县', value: randomValue()},
        {name: '尖草坪区', value: randomValue()},
        {name: '万柏林区', value: randomValue()},
        {name: '晋源区', value: randomValue()},
        {name: '清徐县', value: randomValue()},
        {name: '杏花岭区', value: randomValue()},
        {name: '迎泽区', value: randomValue()},
        {name: '小店区', value: randomValue()}
    ];

    // 产生随机数
    function randomValue() {
        return Math.round(Math.random()*1000000);
    }

    // 初始化echarts示例mapChart
    var mapChart = echarts.init(document.getElementById('map'));
        // 数据加载项，增强用户体验
        mapChart.showLoading();
    // 读取geo地图数据
    $.get('../../mapData/map/json/shanxi/taiyuan.json', function (json)
    {
        echarts.registerMap('taiyuan', json); // 注册地图
        // 数据加载项，增强用户体验
        mapChart.hideLoading();
        // mapChart的配置
        var option = {
            backgroundColor: '#404a59', // 图表背景色
            title : {
                text: '太原市各区县人口密度',
                subtext:'',
                x:'center',
                textStyle : {
                    color: '#fff'
                }
            },
            tooltip : {
                trigger: 'item',
                formatter: '{b}<br/>{c} (p / km2)'
            },
            toolbox: {
                show : true,
                orient : 'vertical',
                x: 'right',
                y: 'center',
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            visualMap: {
                min: 200000,
                max: 1000000,
                text:['高','低'],
                realtime: false,
                calculable: true,
                //splitNumber: 5,
                inRange: {
                    color: ['#d94e5d','#eac736','#50a3ba'].reverse()
                },
                textStyle: {
                    color: '#fff'
                }
            },
            series: [
                {
                    name: '太原市各区县人口密度',
                    type: 'map', // series图表类型
                    label: {
                        emphasis: {
                            show: true,
                            color: '#ffffff'
                        }
                    },
                    roam: true,// 允许缩放
                    zoom: 0,// 默认缩放等级
                    itemStyle: {					// 定义样式
                        normal: {
                            label:{show:true},
                            areaColor: '#323c48',
                            borderColor: '#111'
                        },
                        emphasis: {
                            label:{show:true},
                            areaColor: '#2a333d'
                        }
                    },
                    mapType: 'taiyuan', // 自定义扩展图表类型
                    data: data //业务数据
                }]
        }
        mapChart.setOption(option);
        mapChart.on("click", function(params){
            alert(params.name);
        });
    });
</script>
</html>